<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>银行金融助手</title>
  <link rel="stylesheet" href="../static/css/licaiceshi.css">
  <link href="../static/layui-v2.9.1/layui/css/layui.css" rel="stylesheet">
  <script src="../static/layui-v2.9.1/layui/layui.js"></script>
  <link rel="stylesheet" href="../static/css/footer.css">
  <link rel="stylesheet" href="../static/framework/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="../static/framework/reset.css">
  <link rel="stylesheet" href="../static/bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <script src="../static/bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0; /* 移除默认的 body 外边距 */
      padding-top: 64.8px; /* 为内容留出空间，以避免被 header 覆盖 */
    }

    .header {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed; /* 固定在页面顶部 */
      top: 0; /* 对齐到顶部 */
      left: 50%; /* 将左边缘移动到页面中间 */
      transform: translateX(-50%); /* 将元素水平居中 */
      background-color: #007bff; /* 背景颜色 */
      color: white; /* 文字颜色 */
      text-align: center; /* 文本居中 */
      padding: 1em 0; /* 上下内边距 */
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
      z-index: 1000; /* 确保在顶层 */
      height: 64.8px; /* 高度 */
      width: 100%; /* 宽度 */
    }



    .container {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      justify-content: center;
    }

    .footer {
      width: 100%;
      display: flex;
      justify-content: space-around;
      height: 14vw;
      position: fixed;
      left: 0;
      bottom: 0;
      align-items: center;
      background-color: #fff;
      border-top: solid 1px #DDD;
    }

    .footer div {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .feature {
      background: white;
      border-radius: 8px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      margin: 10px;
      padding: 20px;
      text-align: center;
      width: calc(50% - 40px);
      /* 两个一行，减去左右间距 */
      box-sizing: border-box;
    }

    .icon {
      font-size: 40px;
      /*margin-bottom: 10px;*/
      display: flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      width: 60px;
      border-radius: 50%;
      margin: 0 auto 10px auto;
      color: white;
      cursor: pointer;
    }

    .button {
      display: inline-block;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      margin-top: 10px;
    }

    .button:hover {
      background-color: #0056b3;
    }
  </style>
</head>

<body>
<div class="header">
  <i class="fa fa-angle-left fa-2x" onclick="location.href='/index'"
     style="font-size: 20px;margin-top: 10px;">首页</i>
  <h1 style="margin: auto">银行金融助手</h1>
  <p style="margin-right: 46.84px;"></p>
</div>

<div class="container">
  <div class="feature">
    <div class="icon" style="background: #007bff;" onclick="location.href='/credit_card_application'">
      <!-- 可以在这里添加图标 -->
      💳
    </div>
    <h3>信用卡办理</h3>
  </div>

  <div class="feature">
    <div class="icon" style="background-color: #28a745;" onclick="location.href='/credit_assessment'">
      <!-- 可以在这里添加图标 -->
      🤝
    </div>
    <h3>信用评估</h3>
  </div>

  <div class="feature">
    <div class="icon" style="background-color: #FF9800;" onclick="location.href='/loanProduct'">
      <!-- 可以在这里添加图标 -->
      💰
    </div>
    <h3>贷款办理</h3>
  </div>

  <div class="feature">
    <div class="icon" style="background-color: #E91E63;" onclick="location.href='/exchange_rate'">
      <!-- 可以在这里添加图标 -->
      💱
    </div>
    <h3>汇率查询与计算</h3>
    <!-- <a href="exchange_rate.html" class="button" style="background: #E91E63;">汇率查询与计算</a> -->
  </div>

  <div class="feature">
    <div class="icon" style="background-color: #E91E63;" onclick="location.href='/financeProduct'">
      <!-- 可以在这里添加图标 -->
      <svg t="1718936030118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="3029" width="200" height="200">
        <path
                d="M705.7408 326.0416c-11.6736 13.9264-29.2864 21.504-47.7184 21.504H386.4576c-18.6368 0-36.2496-8.192-48.3328-22.1184-30.3104-35.0208-58.1632-77.2096-58.1632-108.3392 0-77.2096 64.512-64.7168 110.3872-65.3312 39.3216-0.4096 72.704-66.9696 102.6048-43.4176C534.528 141.312 533.504 175.5136 559.9232 172.032c35.4304-4.9152 4.5056-63.6928 95.8464-63.6928 91.136 0 122.6752 36.6592 110.592 108.7488-5.9392 36.0448-32.5632 76.1856-60.6208 108.9536z m-383.3856 88.2688c14.5408-14.9504 34.6112-23.1424 55.7056-23.1424h289.792c21.9136 0 43.008 9.0112 57.344 25.1904 84.1728 93.7984 151.552 224.256 151.552 323.584 0 87.04-88.064 194.9696-196.608 194.9696H343.8592c-108.544 0-196.608-108.7488-196.608-194.9696 0-97.6896 83.968-231.8336 175.104-325.632zM530.432 814.4896c83.968 0 151.9616-67.3792 151.9616-150.7328 0-83.1488-67.9936-150.7328-151.9616-150.7328s-151.9616 67.3792-151.9616 150.7328c-0.2048 83.1488 67.9936 150.7328 151.9616 150.7328z"
                fill="#EC7F37" p-id="3030"></path>
        <path
                d="M763.2896 227.328c0.8192-3.4816 1.8432-6.9632 2.4576-10.24 12.0832-72.0896-19.456-108.7488-110.592-108.7488S594.7392 167.1168 559.3088 172.032c-26.4192 3.6864-25.3952-30.72-66.9696-63.6928-29.9008-23.552-63.2832 43.008-102.6048 43.4176-45.8752 0.6144-110.3872-11.8784-110.3872 65.3312 0 3.2768 0.4096 6.7584 1.024 10.24h482.9184z"
                fill="#F8C846" opacity=".2" p-id="3031"></path>
        <path
                d="M735.6416 285.696c14.7456-22.7328 26.4192-46.4896 30.1056-68.608 12.0832-72.0896-19.456-108.7488-110.592-108.7488S594.7392 167.1168 559.3088 172.032c-26.4192 3.6864-25.3952-30.72-66.9696-63.6928-29.9008-23.552-63.2832 43.008-102.6048 43.4176-45.8752 0.6144-110.3872-11.8784-110.3872 65.3312 0 19.8656 11.4688 44.4416 27.648 68.608h428.6464z"
                fill="#F8C846" opacity=".2" p-id="3032"></path>
        <path
                d="M667.2384 391.168H377.4464c-20.8896 0-41.1648 8.3968-55.7056 23.1424-14.1312 14.5408-28.0576 30.3104-41.5744 46.4896h480.8704c-11.6736-15.36-23.7568-30.3104-36.4544-44.4416-14.336-16.1792-35.4304-25.1904-57.344-25.1904zM385.8432 347.5456H657.408c18.2272 0 36.0448-7.5776 47.7184-21.504 28.0576-32.768 54.6816-73.1136 60.6208-109.1584 12.0832-72.0896-19.456-108.7488-110.592-108.7488s-60.416 58.7776-95.8464 63.6928c-26.4192 3.6864-25.3952-30.72-66.9696-63.6928-29.9008-23.552-63.2832 43.008-102.6048 43.4176-45.8752 0.6144-110.3872-11.8784-110.3872 65.3312 0 31.1296 27.8528 73.3184 58.1632 108.3392 12.0832 14.1312 29.696 22.3232 48.3328 22.3232z"
                fill="#F8C846" opacity=".2" p-id="3033"></path>
        <path
                d="M667.8528 391.168H378.0608c-20.8896 0-41.1648 8.3968-55.7056 23.1424-38.2976 39.5264-75.1616 86.016-105.2672 133.9392h215.6544c26.4192-21.9136 60.416-35.2256 97.4848-35.2256s71.0656 13.312 97.4848 35.2256h190.2592c-25.6-47.104-57.7536-92.7744-92.9792-131.8912-14.1312-16.1792-35.2256-25.1904-57.1392-25.1904zM386.4576 347.5456h271.5648c18.2272 0 36.0448-7.5776 47.7184-21.504 28.0576-32.768 54.6816-73.1136 60.6208-109.1584 12.0832-72.0896-19.456-108.7488-110.592-108.7488s-60.416 58.7776-95.8464 63.6928c-26.4192 3.6864-25.3952-30.72-66.9696-63.6928-29.9008-23.552-63.2832 43.008-102.6048 43.4176-45.8752 0.6144-110.3872-11.8784-110.3872 65.3312 0 31.1296 27.8528 73.3184 58.1632 108.3392 12.0832 14.1312 29.696 22.3232 48.3328 22.3232z"
                fill="#F8C846" opacity=".2" p-id="3034"></path>
        <path
                d="M386.6624 347.7504h271.5648c18.2272 0 36.0448-7.5776 47.7184-21.504 28.0576-32.768 54.6816-73.1136 60.6208-109.1584 12.0832-72.0896-19.456-108.7488-110.592-108.7488S595.5584 167.1168 560.128 172.032c-26.4192 3.6864-25.3952-30.72-66.9696-63.6928-29.9008-23.552-63.2832 43.008-102.6048 43.4176-45.8752 0.6144-110.3872-11.8784-110.3872 65.3312 0 31.1296 27.8528 73.3184 58.1632 108.3392 12.0832 14.1312 29.696 22.3232 48.3328 22.3232zM668.0576 391.3728H378.0608c-20.8896 0-41.1648 8.3968-55.7056 23.1424-73.5232 75.776-142.1312 177.5616-166.0928 265.216h222.8224c-0.6144-5.12-0.8192-10.4448-0.8192-15.7696 0-83.1488 67.9936-150.7328 151.9616-150.7328s151.9616 67.3792 151.9616 150.7328c0 5.3248-0.2048 10.6496-0.8192 15.7696h188.2112c-19.456-87.8592-76.5952-187.392-144.384-263.3728-14.336-15.9744-35.4304-24.9856-57.1392-24.9856z"
                fill="#F8C846" opacity=".2" p-id="3035"></path>
        <path
                d="M547.84 595.968l59.5968 58.9824c8.192 8.192 8.192 21.2992 0 29.4912L547.84 743.424c-8.192 8.192-21.504 8.192-29.696 0l-59.5968-58.9824c-8.192-8.192-8.192-21.2992 0-29.4912L518.144 595.968c7.9872-8.192 21.504-8.192 29.696 0z"
                fill="#EC7F37" p-id="3036"></path>
        <path d="M560.9472 609.0752l-13.1072-13.1072c-8.192-8.192-21.504-8.192-29.696 0l-13.1072 13.1072h55.9104z"
              fill="#F8C846" opacity=".2" p-id="3037"></path>
        <path d="M583.0656 630.9888L547.84 595.968c-8.192-8.192-21.504-8.192-29.696 0l-35.2256 35.0208h100.1472z"
              fill="#F8C846" opacity=".2" p-id="3038"></path>
        <path
                d="M612.5568 664.9856c-0.8192-3.6864-2.4576-7.168-5.3248-10.0352l-59.392-58.9824c-8.192-8.192-21.504-8.192-29.696 0l-59.5968 58.9824c-2.8672 2.8672-4.3008 6.3488-5.3248 10.0352h159.3344z"
                fill="#F8C846" opacity=".2" p-id="3039"></path>
        <path
                d="M460.8 686.8992h143.9744l2.4576-2.4576c8.192-8.192 8.192-21.2992 0-29.4912l-59.392-58.9824c-8.192-8.192-21.504-8.192-29.696 0l-59.5968 58.9824c-8.192 8.192-8.192 21.2992 0 29.4912l2.2528 2.4576z"
                fill="#F8C846" opacity=".2" p-id="3040"></path>
        <path
                d="M497.664 723.3536h70.4512l39.1168-38.912c8.192-8.192 8.192-21.2992 0-29.4912l-59.392-58.9824c-8.192-8.192-21.504-8.192-29.696 0l-59.5968 58.9824c-8.192 8.192-8.192 21.2992 0 29.4912l39.1168 38.912z"
                fill="#F8C846" opacity=".2" p-id="3041"></path>
      </svg>
    </div>
    <h3>理财与保险</h3>
  </div>

  <div class="feature">
    <div class="icon" style="background-color: white;" onclick="location.href='/myProduct'">
      <!-- 可以在这里添加图标 -->
      <svg t="1719488531028" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4124" width="200" height="200"><path d="M374.225455 735.138909c10.705455 0 20.945455 2.001455 30.533818 5.957818 9.634909 4.002909 17.966545 9.541818 25.041454 16.616728 7.074909 7.121455 12.753455 15.499636 16.989091 25.134545 4.282182 9.681455 6.376727 19.874909 6.376727 30.72 0 10.752-2.094545 20.945455-6.376727 30.626909a81.92 81.92 0 0 1-16.989091 25.134546 81.640727 81.640727 0 0 1-25.041454 17.035636 74.705455 74.705455 0 0 1-30.580364 6.423273c-11.310545 0-21.783273-2.141091-31.418182-6.423273a81.640727 81.640727 0 0 1-25.041454-17.035636 81.92 81.92 0 0 1-16.989091-25.134546 75.403636 75.403636 0 0 1-6.376727-30.673454c0-10.798545 2.141091-20.992 6.376727-30.673455a81.92 81.92 0 0 1 16.989091-25.134545 75.869091 75.869091 0 0 1 25.041454-16.616728 81.454545 81.454545 0 0 1 31.418182-5.957818z m353.28 1.722182c10.705455 0 21.085091 1.954909 30.952727 5.957818 9.914182 3.956364 18.432 9.495273 25.506909 16.616727 7.074909 7.074909 12.753455 15.453091 16.989091 25.134546 4.235636 9.634909 6.376727 19.874909 6.376727 30.673454 0 10.798545-2.141091 20.992-6.376727 30.673455a81.92 81.92 0 0 1-16.989091 25.134545 80.290909 80.290909 0 0 1-25.506909 17.035637 77.684364 77.684364 0 0 1-61.533091 0 81.640727 81.640727 0 0 1-25.088-17.035637 81.92 81.92 0 0 1-16.942546-25.134545 75.403636 75.403636 0 0 1-6.376727-30.72c0-10.752 2.094545-20.945455 6.376727-30.626909a81.92 81.92 0 0 1 16.942546-25.134546 75.869091 75.869091 0 0 1 25.088-16.616727c9.588364-4.002909 19.781818-5.957818 30.580364-5.957818z m142.661818-483.979636c15.825455 0 28.16 2.094545 36.910545 6.376727a42.077091 42.077091 0 0 1 18.711273 15.778909c3.677091 6.237091 5.352727 12.893091 5.12 20.014545a66.932364 66.932364 0 0 1-3.025455 18.292364c-1.675636 5.12-5.352727 15.639273-11.031272 31.557818-5.632 15.872-11.729455 33.373091-18.245819 52.410182l-19.54909 56.645818a2820.654545 2820.654545 0 0 1-15.685819 44.311273c-7.354182 22.714182-16.570182 38.493091-27.601454 47.290182-11.031273 8.843636-24.762182 13.218909-41.192727 13.218909H348.718545l11.869091 76.660363h428.869819c27.182545 0 40.773818 11.636364 40.773818 34.909091 0 11.403636-2.699636 21.178182-8.052364 29.416728-5.399273 8.238545-16.011636 12.381091-31.837091 12.381091H345.320727c-11.310545 0-20.805818-2.56-28.439272-7.68a64.558545 64.558545 0 0 1-19.083637-20.014546 121.902545 121.902545 0 0 1-12.334545-26.856727 245.946182 245.946182 0 0 1-7.214546-27.275637c-0.605091-3.397818-2.141091-11.636364-4.654545-24.66909-2.606545-13.079273-5.678545-29.416727-9.355637-49.012364a409966.778182 409966.778182 0 0 1-25.925818-138.472727 37668.119273 37668.119273 0 0 0-36.538182-191.720728H138.100364a34.304 34.304 0 0 1-21.224728-6.376727 55.575273 55.575273 0 0 1-14.010181-15.36 59.112727 59.112727 0 0 1-7.633455-19.176727A92.765091 92.765091 0 0 1 93.090909 166.818909c0-11.357091 3.816727-20.759273 11.450182-28.113454 7.68-7.447273 18.013091-11.077818 30.999273-11.077819h85.783272c11.310545 0 20.386909 1.675636 27.182546 5.12a46.173091 46.173091 0 0 1 24.669091 28.951273l4.189091 14.475636c1.163636 4.561455 2.280727 10.938182 3.397818 19.176728 1.163636 8.238545 2.280727 16.616727 3.397818 25.134545 1.722182 10.24 3.397818 21.038545 5.12 32.395637h580.887273z m-63.720728-27.275637h-310.830545l112.128-112.500363c13.032727-13.032727 27.322182-19.735273 42.868364-20.014546 15.592727-0.279273 29.882182 6.097455 42.914909 19.176727l112.919272 113.338182z" fill="#1296db" p-id="4125"></path></svg>
    </div>
    <h3>我的产品</h3>
    <!-- <a href="credit_assessment.html" class="button" style="background-color: #28a745;">进行信用评估</a> -->
  </div>

</div>

<footer class="footer">
  <div>
    <button type="button" class="layui-btn">
      <i class="layui-icon layui-icon-left"></i>
    </button>
    <button type="button" class="layui-btn">
      <i class="layui-icon layui-icon-right"></i>
    </button>
  </div>
</footer>

<script>
  // JavaScript 可以根据需求来实现页面间跳转的功能
  // 例如使用 window.location.href = "new_page.html" 来跳转到新页面
  const back = document.querySelector('button:first-child')
  const forword = back.nextElementSibling
  back.addEventListener('click', function () {
    //history.back()
    history.go(-1)
  })

  forword.addEventListener('click', function () {
    //history.forward()
    history.go(1)
  })
</script>
</body>

</html>